/*格式说明:
    container宽度为屏幕80%
    .container-all 为屏幕百分之百宽度，左右有细微边距
    row的一行有12个格子
    row的子元素通过colo-xxx-xxx-数字的形式来描述一行占位多少
    col-max-576-xx(表示屏幕尺寸小于576时的响应单位)

    col-min-576-xx(表示屏幕尺寸大于等于576时的响应单位)
    col-min-768-xx(表示屏幕尺寸大于等于768时的响应单位)
    col-min-960-xx(表示屏幕尺寸大于等于960时的响应单位)
    col-min-1140-xx(表示屏幕尺寸大于等于1140时的响应单位)

    本栅格系统中，行与列之间没有默认间距，可以进行自定义设置
*/
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html, body { scroll-behavior:smooth; }
// 页面平滑滚动
.container {
    display: flex;
    width: 80vw;
    flex-direction: column;
    margin: auto;
}
.container-all {
    display: flex;
    width: 100vw;
    padding: 0 0.5vw;
    flex-direction: column;
    margin: auto;
}
    .row {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(12,1fr);
        // 一行内重复12列。大小均等都是1R比例
        @media (max-width: 576px) {
            >.col-max-576-1 {
              grid-column: span 1;
            }
            >.col-max-576-2 {
              grid-column: span 2;
            }
            >.col-max-576-3 {
              grid-column: span 3;
            }
            >.col-max-576-4 {
              grid-column: span 4;
            }
            >.col-max-576-5 {
              grid-column: span 5;
            }
            >.col-max-575-6 {
              grid-column: span 6;
            }
            >.col-max-576-7 {
              grid-column: span 7;
            }
            >.col-max-576-8 {
              grid-column: span 8;
            }
            >.col-max-576-9 {
              grid-column: span 9;
            }
            >.col-max-576-10 {
              grid-column: span 10;
            }
            >.col-max-576-11 {
              grid-column: span 11;
            }
            >.col-max-576-12 {
              grid-column: span 12;
            }
          }
        @media (min-width: 576px) {
            >.col-min-576-1 {
                grid-column: span 1;
                //一列中占1个格子
            }
            >.col-min-576-2 {
                grid-column: span 2;
                //一列中占2个格子
            }
            >.col-min-576-3 {
                grid-column: span 3;
                //一列中占3个格子
            }
            >.col-min-576-4 {
                grid-column: span 4;
                //一列中占4个格子
            }
            >.col-min-576-5 {
                grid-column: span 5;
                //一列中占5个格子
            }
            >.col-min-576-6 {
                grid-column: span 6;
                //一列中占6个格子
            }
            >.col-min-576-7 {
                grid-column: span 7;
                //一列中占7个格子
            }
            >.col-min-576-8 {
                grid-column: span 8;
                //一列中占8个格子
            }
            >.col-min-576-9 {
                grid-column: span 9;
                //一列中占9个格子
            }
            >.col-min-576-10 {
                grid-column: span 10;
                //一列中占10个格子
            }
            >.col-min-576-11 {
                grid-column: span 11;
                //一列中占11个格子
            }
            >.col-min-576-12 {
                grid-column: span 12;
                //一列中占12个格子
            }
            
        }
        @media (min-width: 576px) {
            >.col-min-576-1 {
                grid-column: span 1;
                //一列中占1个格子
            }
            >.col-min-576-2 {
                grid-column: span 2;
                //一列中占2个格子
            }
            >.col-min-576-3 {
                grid-column: span 3;
                //一列中占3个格子
            }
            >.col-min-576-4 {
                grid-column: span 4;
                //一列中占4个格子
            }
            >.col-min-576-5 {
                grid-column: span 5;
                //一列中占5个格子
            }
            >.col-min-576-6 {
                grid-column: span 6;
                //一列中占6个格子
            }
            >.col-min-576-7 {
                grid-column: span 7;
                //一列中占7个格子
            }
            >.col-min-576-8 {
                grid-column: span 8;
                //一列中占8个格子
            }
            >.col-min-576-9 {
                grid-column: span 9;
                //一列中占9个格子
            }
            >.col-min-576-10 {
                grid-column: span 10;
                //一列中占10个格子
            }
            >.col-min-576-11 {
                grid-column: span 11;
                //一列中占11个格子
            }
            >.col-min-576-12 {
                grid-column: span 12;
                //一列中占12个格子
            }
            
        }
        
        @media (min-width: 768px) {
            >.col-min-768-1 {
                grid-column: span 1;
                //一列中占1个格子
            }
            >.col-min-768-2 {
                grid-column: span 2;
                //一列中占2个格子
            }
            >.col-min-768-3 {
                grid-column: span 3;
                //一列中占3个格子
            }
            >.col-min-768-4 {
                grid-column: span 4;
                //一列中占4个格子
            }
            >.col-min-768-5 {
                grid-column: span 5;
                //一列中占5个格子
            }
            >.col-min-768-6 {
                grid-column: span 6;
                //一列中占6个格子
            }
            >.col-min-768-7 {
                grid-column: span 7;
                //一列中占7个格子
            }
            >.col-min-768-8 {
                grid-column: span 8;
                //一列中占8个格子
            }
            >.col-min-576-9 {
                grid-column: span 9;
                //一列中占9个格子
            }
            >.col-min-768-10 {
                grid-column: span 10;
                //一列中占10个格子
            }
            >.col-min-768-11 {
                grid-column: span 11;
                //一列中占11个格子
            }
            >.col-min-768-12 {
                grid-column: span 12;
                //一列中占12个格子
            }
            
        }

        @media (min-width: 960px) {
            >.col-min-960-1 {
                grid-column: span 1;
                //一列中占1个格子
            }
            >.col-min-960-2 {
                grid-column: span 2;
                //一列中占2个格子
            }
            >.col-min-960-3 {
                grid-column: span 3;
                //一列中占3个格子
            }
            >.col-min-960-4 {
                grid-column: span 4;
                //一列中占4个格子
            }
            >.col-min-960-5 {
                grid-column: span 5;
                //一列中占5个格子
            }
            >.col-min-960-6 {
                grid-column: span 6;
                //一列中占6个格子
            }
            >.col-min-960-7 {
                grid-column: span 7;
                //一列中占7个格子
            }
            >.col-min-960-8 {
                grid-column: span 8;
                //一列中占8个格子
            }
            >.col-min-960-9 {
                grid-column: span 9;
                //一列中占9个格子
            }
            >.col-min-960-10 {
                grid-column: span 10;
                //一列中占10个格子
            }
            >.col-min-960-11 {
                grid-column: span 11;
                //一列中占11个格子
            }
            >.col-min-960-12 {
                grid-column: span 12;
                //一列中占12个格子
            }
            
        }
        

        @media (min-width: 1140px) {
            >.col-min-1140-1 {
                grid-column: span 1;
                //一列中占1个格子
            }
            >.col-min-1140-2 {
                grid-column: span 2;
                //一列中占2个格子
            }
            >.col-min-1140-3 {
                grid-column: span 3;
                //一列中占3个格子
            }
            >.col-min-1140-4 {
                grid-column: span 4;
                //一列中占4个格子
            }
            >.col-min-1140-5 {
                grid-column: span 5;
                //一列中占5个格子
            }
            >.col-min-1140-6 {
                grid-column: span 6;
                //一列中占6个格子
            }
            >.col-min-1140-7 {
                grid-column: span 7;
                //一列中占7个格子
            }
            >.col-min-1140-8 {
                grid-column: span 8;
                //一列中占8个格子
            }
            >.col-min-1140-9 {
                grid-column: span 9;
                //一列中占9个格子
            }
            >.col-min-1140-10 {
                grid-column: span 10;
                //一列中占10个格子
            }
            >.col-min-1140-11 {
                grid-column: span 11;
                //一列中占11个格子
            }
            >.col-min-1140-12 {
                grid-column: span 12;
                //一列中占12个格子
            }
            
        }
    }




